<template>
    <div class="showBox" v-loading="isLoad">
      <div class="detail">
        <div class="info">
          <span>
            {{pageObj.empName}}
          </span>
          <el-button size="mini" round @click="$router.go(-1)">
            返回
          </el-button>
        </div>

        <div class="box">
         <div style="width: 35%;height: 100%;">
           <div class="iconPanel">
             <div class="icon">
               <p>
                 <img src="@/assets/images/img_icon/calendar_icon.svg">
                 <span>
                  实际出勤天数 {{pageObj.allDays}}
                </span>
               </p>
               <p>
                 <img src="@/assets/images/img_icon/run_icon.svg">
                 <span>
                  迟到次数 {{!!pageObj.lateList ? pageObj.lateList.length : 0}}
                </span>
               </p>
             </div>

             <div class="icon">
               <p>
                 <img src="@/assets/images/img_icon/warning_icon.svg">
                 <span>
                  早退次数 {{!!pageObj.leaveList ? pageObj.leaveList.length : 0}}
                </span>
               </p>
               <p>
                 <img src="@/assets/images/img_icon/alarmClock_icon.svg">
                 <span>
                  漏签次数 {{!!pageObj.shortList ? pageObj.shortList.length : 0}}
                </span>
               </p>
             </div>
           </div>

           <div class="attendanceList">
             <el-collapse value="first">
               <el-collapse-item name="first">
                 <template slot="title">
                   <img src="@/assets/images/img_icon/circle_icon_red.svg" style="width: 25px;height: 25px">
                   <p>迟到</p>
                 </template>
                 <div v-for="(item,index) in pageObj.lateList" :key="index">
                   {{item}}
                 </div>

               </el-collapse-item>
               <el-collapse-item>
                 <template slot="title">
                   <img src="@/assets/images/img_icon/circle_icon_warning.svg" style="width: 25px;height: 25px">
                   <p>早退</p>
                 </template>
                 <div v-for="(item,index) in pageObj.leaveList" :key="index">
                   {{item}}
                 </div>
               </el-collapse-item>
               <el-collapse-item>
                 <template slot="title">
                   <img src="@/assets/images/img_icon/circle_icon_blue.svg" style="width: 25px;height: 25px">
                   <p>漏签</p>
                 </template>
                 <div v-for="(item,index) in pageObj.shortList" :key="index">
                   {{item}}
                 </div>
               </el-collapse-item>
             </el-collapse>
           </div>
         </div>


          <div class="calendar attendanceRecord__calendar">
            <div class="record__calendar__header">
              <el-button icon="el-icon-arrow-left" class="calendar-button-left" circle  @click="TodaySelect('prev-month')"></el-button>
              <el-button icon="el-icon-arrow-right" circle @click="TodaySelect('next-month')" class="calendar-button-right"></el-button>
            </div>
            <el-calendar v-model="calendarValue"  ref="calendar">
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
              <template
                slot="dateCell"
                slot-scope="{date, data}">
                <div :class="data.isSelected ? 'calendar-show' : ''" class="calendar-select" @click="handleData(data)">
                <p>
                  <span style="line-height: 30px">{{ data.day.split('-').slice(2).join('-')}}</span>
                  <span v-for="(item, index) in calendarDateType" :key="index">
                      <span v-if="item === data.day" class="data__type__item">
                        <span>{{item.split('-').slice(2).join('-')}}</span>
                      </span>
                    </span>
                   </p>
                </div>
              </template>
            </el-calendar>
            <el-row>
              <el-col :span="18" :offset="3" class="calendar__getAttendance">
                <el-col :span="4" class="getAttendance__day">{{day}}日</el-col>
                <el-col :span="20" class="getAttendance__time">
                  <el-col :span="12" class="getAttendance__start">上班时间：{{!!startTime ? format(new Date(this.startTime), 'hh') : '__'}}<span style="padding: 0 5px">:</span>{{!!startTime ? format(new Date(this.startTime), 'mm') : '__'}}</el-col>
                  <el-col :span="12" class="getAttendance__end">下班时间：{{!!stopTime ? format(new Date(this.stopTime), 'hh') : '__'}}<span style="padding: 0 5px">:</span>{{!!stopTime ? format(new Date(this.stopTime), 'mm') : '__'}}</el-col>
                </el-col>
             </el-col>
            </el-row>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  import {getAttendanceDataDetail, getAttendanceByUser} from '@/api/smartShops'
  import {formatDate} from '@/utils/format-data'
    export default {
        name: "Detail",
        data(){
          return{
            pageObj:{
              empName:'',
              empCode:'',
              actDays: 0,
              lateNums: 0,
              leaveNums: 0,
              shortNums: 0,
              startTime: '',
              stopTime: '',
              lateList:[]
            },
            calendarDateType: [],
            isLoad:false,
            date:'',
            calendarValue:'',
            lateList:[],
            startTime: '',
            stopTime: '',
            day: ''
          }
        },
      methods:{
        format(val, i) {
          return formatDate(val, i)
        },
        /**
         * Click Today Left Button Right Button
         */
        TodaySelect(val) {
          this.$refs.calendar.selectDate(`${val}`);
          formatDate(new Date(this.calendarValue), 'yyyy-MM') !== formatDate(new Date(), 'yyyy-MM') ?
            this.handleDataDay({day: this.calendarValue}) :
            this.handleDataDay({day: formatDate(new Date(), 'yyyy-MM-dd')});
          this.getData({day: formatDate(this.calendarValue, 'yyyy-MM')})
        },
        //根据日期获取当天打卡记录
        async handleDataDay(date) {
          this.day = formatDate(new Date(date.day), 'dd');
          let  {result} = await getAttendanceByUser({
            empUuid: this.$route.params.empUuid,
            attendanceDate: formatDate(new Date(date.day), 'yyyy-MM-dd')
          })
          this.startTime = !!result ? result.startTime.replace(new RegExp(/-/gm) ,"/") : '';
          this.stopTime = !!result ? result.stopTime.replace(new RegExp(/-/gm) ,"/") : ''
        },
       handleData(date) {
         this.handleDataDay(date)
         this.getData(date)
        },
        async getData(date){
          this.calendarValue = formatDate(new Date(date.day), 'yyyy-MM');
          let empUuid = this.$route.params.empUuid;
          let data = await getAttendanceDataDetail({empUuid:empUuid,currtDate:this.calendarValue});
            if(data.result){
               this.pageObj = data.result;
               let dateType = [];
               for (let item in this.pageObj){
                 if (this.pageObj[item] instanceof Array) {
                   dateType.push(...this.pageObj[item])
                 }
               }
              // lateList  leaveList  shortList  calendarDateType
              this.calendarDateType = [...new Set(dateType.map(item => {
                return formatDate(new Date(item.replace(new RegExp(/-/gm) ,"/")), 'yyyy-MM-dd')
              }))]
              return
            }
          this.pageObj={};
              this.$message({
                type:'error',
                message: `${data.message}`,
              })
            this.isLoad=false;
        },
      },
      mounted(){
        formatDate(new Date(), 'yyyy-MM') !== this.$route.params.date ?
          this.handleData({day: this.$route.params.date}) :
          this.handleData({day: formatDate(new Date(), 'yyyy-MM-dd')})
      },
      created() {
      },
    }
</script>

<style scoped lang="scss">

  .showBox{
    width: 100%;
    height: 100%;
    color: #303133;

    .detail{
      width: 100%;
      height: 100%;


      .info{
        height: 48px;
        width: 100%;


        box-sizing: border-box;
        border-bottom: 1px solid #DCDFE6;
        padding: 10px 0;


        span{
          color: #606266;
          font-size:14px;
          line-height: 100%;
          &:nth-child(1){
            font-size: 25px;
            font-weight: 500;
          }

          &:nth-child(2){
            margin: 0 15px;
          }
        }

        .el-button{
          float: right;
        }

      }

      .box{
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .iconPanel{
          height: 50%;
          width: 100%;
          display: flex;
          flex-direction: column;


          .icon{
            width: 100%;
            height: 40%;
            display: flex;


            p{
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              position: relative;
              img{
                width: 50px;
                height: 50px;
              }

              span{
                display: block;
                height: 30px;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                line-height: 30px;
                font-size: 14px;
                text-align: center;

              }
            }

          }
        }

        .attendanceList{
          width: 100%;
          height: 60%;


          .el-collapse-item__content{
            div{
              font-size: 13px;
              padding-left: 20px;
            }
          }
        }

        .calendar {
          width: 60%;
          height: 100%;
        }

      }


    }
  }

</style>
<style lang="scss">
  .attendanceRecord__calendar{
    position: relative;
    .calendar__getAttendance{
      height: 40px;
      border-radius: 10px;
      line-height: 40px;
      background: #F7F7F7;
      .getAttendance__day{
        background: #666471;
        font-weight: bold;
        padding: 0 10px;
        color: #fff;
        border-radius: 10px 0 0 10px;
      }
      .getAttendance__time{
        border: 1px solid #ccc;
        height: 40px;
        border-radius: 0 10px 10px 0;
      }
      .getAttendance__start, .getAttendance__end{
        padding: 0 10px;
      }
    }
    .el-calendar__header{
      justify-content: center !important;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      color: rgb(0, 0, 0)
    }
    .el-calendar__button-group{
      display: none;
    }
    .calendar-button-left{
      position: absolute;
      left: 20%;
      top: 5px;
    }
    .calendar-button-right{
      position: absolute;
      right: 20%;
      top: 5px;
    }

    .el-calendar-table .el-calendar-day {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      height: 58px !important;

      .is-selected{
        background-color:transparent  !important;
      }
      &:hover{
        background-color:transparent  !important;
      }
      .calendar-select{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        p{
          width: 30px;
          height: 30px;
          position: relative;
          border-radius: 15px;
          text-align: center;
          .data__type__item{
            width: 30px;
            height: 30px;
            left: 0;
            background: #F13D3E;
            position: absolute;
            color: #fff;
            border-radius: 15px;
            line-height: 30px;
          }
        }
      }
    }
    .is-today{
      .calendar-select{
        span{
          /*background: #A6A6A6 !important;*/
          /*color: #fff !important;*/
        }
      }
    }
  }
</style>
